<script setup lang="ts" name="Car">
    import { reactive, watch } from 'vue'

    let car = reactive({
        name: 'Car',
        age: 1,
        color: 'Red',
    })

    let games = [
        { name: 'League of Legends', type: 'MOBA' },
        { name: 'PUBG', type: 'Battle Royale' },
        { name: 'Minecraft', type: 'Sandbox' },
    ]

    function ChangeCar() {

        car.age += 1

        //  相应式对象属性更新
        Object.assign(car, {
            name: 'Tesla',
            age: car.age + 1,
            color: 'Blue',
        })
        console.log(car)
    }

    // 1. 监视 ref默认是浅监控，只是监控对象的引用地址 
    // 2. 如果是监控 reactive对象，那么默认是深度监控，相当于deep: true
    watch(car, (newValue, oldValue) => {
        console.log(`car changed from ${oldValue} to ${newValue}`);
    })

</script>

<template>
  <div class="car">
    <h1>{{ car.name }}</h1>
    <p>Age: {{ car.age }} years</p>
    <p>Color: {{ car.color }}</p> 
    <p>
      <input type="text" v-model="car.name" placeholder="Enter car name" />
      <input type="text" v-model="car.color" placeholder="Enter car color" />
    </p>
    <button type="button" @click="car.age++">Increase Age</button>
    <button type="button" @click="car.age--">Decrease Age</button>
    <button type="button" @click="ChangeCar">Change Car</button>

    <h2>Favorite Games</h2>
    <ul>
    <!-- 循环列表 -->
      <li v-for="game in games" :key="game.name">
        {{ game.name }} ({{ game.type }})
      </li>
    </ul>
    

    </div>
</template>




<style scoped>
.car {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

button:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}

input:hover {
    margin-top: 10px;
    padding: 5px 10px;
    margin: 0 10px;
    font-size: 16px;
    cursor: pointer;
    filter: drop-shadow(0 0 2em #d4d643aa);
}
</style>
